import React from 'react';
import { connect } from 'dva';
import { Menu, Icon, Checkbox } from 'antd';
const { SubMenu } = Menu;
import MenuCom from '@/components/Menus/menu';
import styles from './index.less'

@connect(({ graphics }) => ({ graphics }))
class GraphicsLayer extends React.Component {
  constructor(props) {
    super(props);

    let checkList;
    if ('defaultValue' in props) {
      checkList = props.defaultValue;
    }
    this.state = {
      checkList,
    };
  }

  componentDidMount() {
    this.init();
  }

  init = () => {
    this.queryServer()
  }
  // ajax请求
  queryServer = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'graphics/spaceResourcesQuery',
      payload: {},
    });
  }

  //图层切换
  onChangeMenu = e => {
    console.log('checked = ', e.target ? e.target.value : '');
    let { checkList,layerList } = this.state;
    if (!e.target.value) return false;
    const { onLayerChange } = this.props;
    if (onLayerChange) onLayerChange(e)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.defaultValue !== nextProps.defaultValue) {
      if (nextProps.defaultValue) {
        this.setState({
          checkList: nextProps.defaultValue
        })
      }
    }
  }

  render() {
    const { SpaceResource } = this.props.graphics;
    let submenus = null;
    let defaultOpenKeys = [];
    if (SpaceResource && SpaceResource.length > 0) {
      submenus = SpaceResource.map(ele => {
        defaultOpenKeys.push('' + ele.appMapId);
        let items = null;
        if (ele.childrens) {
          items = ele.childrens.map(ele1 => {
            let {netUrl, url} = ele1;
            // netUrl = 'http://localhost/';
            return (
              <Menu.Item key={ele1.appMapId}>
                <Checkbox className={`checkboxStyle ${styles.checkboxStyle}`} onChange={this.onChangeMenu} value={netUrl + url || ''} mapName={ele1.mapName || ''} tableId={ele1.tableId || ''}
                          appMapId={ele1.appMapId || ''} mapType={ele1.mapType || ''} description={ele1.description || ''}>
                  {ele1.mapName || ''}
                </Checkbox>
              </Menu.Item>)
          })
        }
        return (<SubMenu key={ele.appMapId} title={
          // <span>
          //   <Icon type="global" />
          //   <span>{ele.mapName}</span>
          // </span>
          <MenuCom ele={ele} />
        }
        className={`submenusStyle ${styles.submenusStyle}`}
        >
          {items}
        </SubMenu>)
      })
    }
    return (
      <Menu
        mode="inline"
        defaultOpenKeys={defaultOpenKeys}
        className={styles.menuOutput}
        style={{ width: 236,overflow: 'hidden auto',height: '100%' }}>
        {submenus}
      </Menu>
    );
  }
}

export default GraphicsLayer;
